<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>
    <link rel="stylesheet" href="../css/navbar.css">
    <link rel="stylesheet" href="../css/articleDetail.css">
</head>

<body>
    <div class="navbar">
        <div class="left">
            <a href="/">首页</a>
            <a href="/all_questions.html">编程题库</a>
        </div>
        <div class="center">
            <a href="/html/job_seek.html">求职</a>
            <a href="/html/learning.html">学习</a>
            <a href="/html/discuss.html">讨论</a>
            <a href="/html/question_bank.html">知识题库</a>
            <a href="/html/ai_qa.html">AI问答</a>
        </div>
        <div class="right">
            <a href="/html/register.html">注册</a>
            <a href="/html/login.html">登录</a>
            <a href="/html/userInfo.html" class="toRight">个人信息</a>
        </div>
    </div>

    <main>
        <section id="article-detail" class="section">
            <h2 id="article-title"></h2>
            <p id="article-author"></p>
            <p id="article-publish-date"></p>
            <p id="article-category"></p>
            <div id="article-content"></div>
            <p id="article-tags"></p>
            <p id="article-view-count"></p>
            <p id="article-like-count"></p>
            <p id="article-comment-count"></p>
            <p id="article-share-count"></p>

            <!-- 点赞、评论、分享按钮区 -->
            <div id="action-buttons">
                <button id="like-button" onclick="handleLike()">👍 点赞</button>
                <button id="comment-button" onclick="handleComment()">💬 评论</button>
                <button id="share-button" onclick="handleShare()">🔗 分享</button>
            </div>

            <!-- 评论区 -->
            <section id="comments-section">
                <h3>评论</h3>
                <div id="comments-list">
                    <!-- 用户评论会在这里生成 -->
                </div>
                <!-- 评论输入框 -->
                <div id="add-comment" style="display: none;">
                    <textarea id="comment-input" placeholder="写下您的评论..."></textarea>
                    <button onclick="submitComment()">提交评论</button>
                </div>

            </section>

            <!-- 返回按钮 -->
            <button id="back-to-resources" onclick="window.location.href='/html/learning.html'">返回资源推荐</button>
        </section>

    </main>
    <script src="../js/articleDetail.js"></script>
    <script>
        // 页面加载时调用加载评论的函数
        loadComments();
    </script>
</body>

</html>